<template>
	<z-swiper ref="zSwiper" v-model="list" :options="options" @click="onClick">
		<z-swiper-item :custom-style="slideCustomStyle" v-for="(item,index) in list" :key="index">
			<view class="card-box">
				<view class="top-panel">
					<template v-if="item.classify_title">
						<view class="classify-icon">{{ item.classify_title }}</view>
					</template>
					<template v-else>
						<view></view>
					</template>
					<view class="case-number">{{ item.record_number }}</view>
				</view>
				<image class="video-img" :src="item.oss_object.url"></image>
			</view>
		</z-swiper-item>
	</z-swiper>
</template>

<script>
export default {
  name: 'TantanCard',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      slideCustomStyle: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '36rpx',
        height: '62vh'
      },
      options: {
        effect: 'cards',
        cardsEffect: {
          rotate: false,
          perSlideOffset: 8,
          perSlideRotate: 2
        }
      },
    }
  },
  methods: {
    onClick() {
      const { swiper } = this.$refs.zSwiper
      const { activeIndex } = swiper
			
      const { list } = this.$props
      const { id } = list[activeIndex]
      uni.navigateTo({ url: `/pages/player/player?library_id=${id}` })
    },
		
    onPrev() {
      const { swiper } = this.$refs.zSwiper
      const { activeIndex } = swiper
      if (activeIndex === 0) return

      const target = activeIndex - 1
      swiper.slideTo(target, 500, false) //切换到第几个slide，速度为1秒
    },

    onNext() {
      const { swiper } = this.$refs.zSwiper
      const { activeIndex } = swiper
      const { list } = this.$props
      if (activeIndex === list.length) return

      const target = activeIndex + 1
      swiper.slideTo(target, 500, false) //切换到第几个slide，速度为1秒
    }

  }

}
</script>


<style lang="scss" scoped>
	.card-box {
		position: relative;
		width: 80%;
		height: 100%;
		overflow: hidden;
		border-radius: 24rpx;

		.top-panel {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.classify-icon {
				position: absolute;
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				left: 0;
				top: 0;
				color: #fff;
				font-size: 24rpx;
				background-image: url('/static/images/video-classify-back.png');
				background-size: 100% 100%;
				z-index: 2;
			}
		}

		.case-number {
			position: relative;
			height: 44rpx;
			line-height: 44rpx;
			color: #fff;
			font-size: 24rpx;
			padding-right: 20rpx;
			z-index: 2;
		}

		.video-img {
			position: absolute;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
		}
	}
</style>
